import cinemasDeteilsView from '../views/cinemasDetails.art'
import cinemasDetailsModles from '../models/cinemasDetails'
import movieinfoView from '../views/movieinfo.art'
import moviesWrapView from '../views/moviesWrap.art'
import movieSeatListView from '../views/movieSeatList.art'

class CinemasDeteils{
    constructor(){
        this.cinemaData = []
        this.showData = []
        this.timeindex = 0
        this.index = 0
    }



    cinemDataRender(cinemaData,showData,index){
        let that = this
        that.timeindex = 0
        let cinemasDeteilsHtml = cinemasDeteilsView({
            cinemaData,
            showData,
            index
        })
        let moviesWrapHtml = moviesWrapView({
            dateShow : showData[0].movies[0].shows
        })
        $('#root').html(cinemasDeteilsHtml)
        $('.nav-wrap').html(moviesWrapHtml)
        that.movieSeatListRender(that.timeindex)

        var swiper = new Swiper('.cinema-nav', {
            pagination: '.swiper-pagination',
            slidesPerView: 5,
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 15,
            speed:500,
            slideToClickedSlide:true,
            initialSlide : 0
        })


        $('.left').on('tap',function(){
            window.history.back()
        })


        $('.nav-item').on('tap',function(){
            let timeindex = 0
            $(this).addClass('active').siblings().removeClass('active')
            for(let i in that.showData[0].movies[0].shows){
                if($('.nav-item').eq(i).attr('class') == 'nav-item active'){
                    timeindex = that.timeindex = i
                }  
            }
            that.movieSeatListRender(timeindex)
        })


        $('.cinema-nav').on('touchend',function(){
            let index
            that.timeindex = 0
            for(let i in that.showData[0].movies){
                if($('.nav-cinema').eq(i).attr('class') == 'nav-cinema swiper-slide swiper-slide-active'){
                    index = that.index = i
                }  
            }
            let movieinfo = that.showData[0].movies[index]
            let bgimage = that.showData[0].movies[index].img

            let moviesWrapHtml = moviesWrapView({
                dateShow : that.showData[0].movies[index].shows
            })

            $('.post-bg').css('background-image','url('+ bgimage +')')
            that.movieinfoRender(movieinfo)
            $('.nav-wrap').html(moviesWrapHtml)
            that.movieSeatListRender(that.timeindex)

            $('.nav-item').on('tap',function(){
                let timeindex = 0
                $(this).addClass('active').siblings().removeClass('active')
                for(let i in that.showData[0].movies[0].shows){
                    if($('.nav-item').eq(i).attr('class') == 'nav-item active'){
                        timeindex = that.timeindex = i
                    }  
                }
                that.movieSeatListRender(timeindex)
            })
        })
    }



    movieSeatListRender(timeindex){
        let that = this
        let showData = that.showData
        let dur = showData[0].movies[that.index].dur
            for(let i in showData[0].movies[that.index].shows[timeindex].plist){


                if(showData[0].movies[that.index].shows[timeindex].plist[i].vipPrice){
                    let price = (showData[0].movies[that.index].shows[timeindex].plist[i].vipPrice)*1
                    showData[0].movies[that.index].shows[timeindex].plist[i]['price'] = price+5
                }else{
                    showData[0].movies[that.index].shows[timeindex].plist[i]['price'] = 38
                }

                let hour = (showData[0].movies[that.index].shows[timeindex].plist[i].tm.slice(0,2))*60
                let mintues = (showData[0].movies[that.index].shows[timeindex].plist[i].tm.slice(3))*1
                let endhour = Math.floor((hour + mintues+dur)/60)
                if(endhour >=24){
                    endhour -=24
                }
                let endmintues =  (hour + mintues+dur)%60
                if(endhour<10){
                    endhour = '0'+endhour
                }
                if(endmintues<10){
                    endmintues = '0'+endmintues
                }
                let endtime = endhour  +':'+endmintues
                showData[0].movies[that.index].shows[timeindex].plist[i]['et'] = endtime
            }
            let movieSeatListHtml = movieSeatListView({
                plist : showData[0].movies[that.index].shows[timeindex].plist
            })
            $('.seat-wrap').html(movieSeatListHtml)
    }




    movieinfoRender(movieinfo){
        let movieinfoHtml = movieinfoView({
            movieinfo
        })
        $('.movie-info').html(movieinfoHtml)
    }


    
    async render(ID){
        this.cinemaData = []
        this.showData = []
        this.index = 0
        this.timeindex = 0
        let result = await cinemasDetailsModles.get({
            cinemaId : ID
        })
        this.cinemaData.push(result.cinemaData)
        let cinemaData = this.cinemaData
        this.showData.push(result.showData)
        for(let i in this.showData[0].movies){
            this.showData[0].movies[i].img = (this.showData[0].movies[i].img).replace('w.h','148.208')
        }
        let showData = this.showData
        let index = 0
        this.cinemDataRender(cinemaData,showData,index)
    }
}
export default new CinemasDeteils()